<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <title>Ajax取消请求</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 1px pink;
      }
    </style>
  </head>

  <body>
    <h2 class="page-header">Jquery 发送Ajax请求</h2>
    <button class="btn btn-primary">GET</button>
    <button class="btn btn-danger">POST</button>
    <button class="btn btn-info">通用型</button>
  </body>
  <script type="text/javascript">
    $("button")
      .eq(0)
      .click(function () {
        $.get(
          "http://127.0.0.1:8000/jquery",
          {
            a: 100,
            b: 200,
          },
          function (data) {
            console.log(data);
          },
          "json"
        );
      });
    $("button")
      .eq(1)
      .click(function () {
        $.post(
          "http://127.0.0.1:8000/jquery",
          {
            a: 100,
            b: 200,
          },
          function (data) {
            console.log(data);
          },
          "json"
        );
      });
    $("button")
      .eq(2)
      .click(function () {
        $.ajax({
          url: "http://127.0.0.1:8000/jquery",
          data: {
            a: 100,
            b: 200,
          },
          type: "GET",
          //响应体结果
          dataType: "json",
          //成功的回调
          success: (data) => {
            console.log(data);
          },
          //超时时间
          timeout: 2000,
          // 失败的回调
          error: () => {
            console.log("失败");
          },
          //设置请求头
          headers: {
            c: 300,
            d: 400,
          },
        });
      });
  </script>
</html>
